<template>
  <div class="proDetail">
    <mt-swipe :auto="4000">
      <mt-swipe-item v-if="proDetail.pic&&proDetail.pic.length===1">
        <img :src="'http://127.0.0.1:3000'+ proDetail.pic[0].picAddr" alt>
      </mt-swipe-item>
      <mt-swipe-item v-for="(item,index) in proDetail.pic" :key="index">
        <img :src="'http://127.0.0.1:3000'+ item.picAddr" alt>
      </mt-swipe-item>
    </mt-swipe>
    <mt-cell>{{proDetail.proName}}</mt-cell>
    <mt-cell>
      价格：
      <span clsss="new-price">{{proDetail.price}}</span>
      <span class="old-price">{{proDetail.oldPrice}}</span>
    </mt-cell>
    <mt-cell class="size-box">
      尺码：
      <span
        @click.prevent="proObj.proSize=size"
        :class="{'size':true,'active':proObj.proSize===size}"
        v-for="(size,index) in sizes"
        :key="index"
      >{{size}}</span>
    </mt-cell>
    <mt-cell>数量：
      <mt-range v-model="proObj.proNum" :min="1" :max="proDetail.num" :step="1" :bar-height="5">
        <div slot="start">1</div>
        <div slot="end">
          {{proDetail.num}}&nbsp;
          <span>您选择了{{proObj.proNum}}</span>
        </div>
      </mt-range>
    </mt-cell>
    <div class="lt_footer">
      <router-link to="/cart" class="fa fa-shopping-cart"></router-link>
      <mt-button type="primary">立即购买</mt-button>
      <mt-button type="danger" @click="addCart">加入到购物车</mt-button>
    </div>
  </div>
</template>
<script>
import { proDetail,cartData } from "@/api";
export default {
  data() {
    return {
      proObj: {
        proId: "",
        proNum: 1,
        proSize: 40
      },
      sizes: [],
      proDetail: {}
    };
  },
  created() {
    this.proObj.proId = this.$route.params.id;
    proDetail(this.proObj.proId).then(res => {
      var arr = res.data.size.split("-");
      for (var i = arr[0]; i <= arr[1]; i++) {
        this.sizes.push(i);
      }
      this.proDetail = res.data;
    });
  },
  methods: {
    addCart() {
      cartData(this.proObj)
      .then(res=>{
         if (res.data.error === 400) {
          this.$toast({
            message: res.data.message,
            position: 'bottom',
            duration: 2000
          })
          this.$router.push({name:'Login',params:{returnURL: location.href}})
         }
         else{
             this.$messagebox.confirm('添加成功，是否查看购物车?').then(action => {
            console.log('购物车')
          })
         }
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.proDetail {
  font-size: 14px;
  padding-bottom: 60px;
}
.mint-swipe {
  height: 330px;
  img {
    height: 100%;
    width: 100%;
    display: block;
  }
}
.new-price {
  color: red;
  font-weight: 600;
}
.old-price {
  color: #666;
  text-decoration: line-through;
  margin-left: 10px;
}
.size-box {
  .size {
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: #ccc;
    margin: 0 10px 10px 0;
    text-align: center;
    border: 1px solid #666;
    &.active {
      background: pink;
    }
  }
}
.mt-range {
  width: 300px;
}
.lt_footer {
  background-color: #ddd;
  padding-top: 6px;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  .fa {
    font-size: 22px;
    margin-left: 10px;
    color: #666;
  }
  button {
    float: right;
    padding: 6px 22px;
  }
}
</style>
